<template>
  <div>
    <jl-from-button :label="label" @click="click" color="color: #2d2d2d"/>
    <div class="jl_body">
      <mt-popup style="height: 100%;width: 100%;background:#f1f1f1; !important; "
                v-model="show"
                :modal="false"
                position="right">
        <jl-header>
          <mt-header :title="title" :fixed="true">
            <i slot="left">
              <mt-button icon="back" @click="close"></mt-button>
            </i>
          </mt-header>
        </jl-header>

        <jl-content>
          <div class="list_search_header" v-if="isSearchShow">
            <input :placeholder="placeholder" v-model="condition">
            <span @click="search">搜索</span>
          </div>

          <div class="qd_list" v-infinite-scroll="loadMore"
               :infinite-scroll-disabled="loading"
               :infinite-scroll-distance="10">
            <div class="hide" ref="template">
              <slot></slot>
            </div>
            <template v-for="item of resList">
              <div class="w12" v-html="getHtml(item)" @click="go(item)"></div>
            </template>
          </div>
          <p v-show="loading" class="infinite-loading">
            <mt-spinner type="fading-circle"></mt-spinner>
            加载中...
          </p>

          <div class="tips_no_pro" v-if="this.resList.length <=  0">
            <div class="tips_no_main">
              <div class="w12 tc font_gray_ccc" style="font-size:50px;"><i class="fa fa-sticky-note-o"></i></div>
              <div class="w12 tc font_size_super mt20 font_gray_ccc">暂无记录</div>
            </div>
          </div>
        </jl-content>
      </mt-popup>
    </div>
  </div>
</template>

<script>
  export default {
    name: "jl-search-my-data",
    props: {
      title: {type: String},
      label: {type: String},
      type: {
        type: String,
        default: 'start' // start,contract,need,data
      },
      sqlid: {type: String},
      params: {
        type: Object
      },
      resultName: {type: String},
      goName: {type: String},
      placeholder: {type: String},
      isSearchShow: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        show: false,
        resList: [],
        loading: false,
        page_num: 1,
        isEnd: false,
        template: '',
        condition: ''
      }
    },
    methods: {
      close() {
        this.condition='';
        this.show = false
      },
      click() {
        this.show = true
      },
      loadMore() {
        if (this.isEnd) return
        this.loading = true
        this.page_num++
        this.searchMyData()
      },
      searchMyData() {
        let requestType;
        switch (this.type) {
          case 'start':
            //登录单
            requestType = () => {
              return new Promise((resolve, reject) => {
                this.$engineer.searchMyStart({
                  page_num: this.page_num,
                  condition: this.condition
                }).then(v => resolve(v)).catch(e => reject(e))
              })
            };
            break;
          case 'contract':
            //合同
            requestType = () => {
              return new Promise((resolve, reject) => {
                this.$engineer.searchMyContract({
                  page_num: this.page_num,
                  condition: this.condition
                }).then(v => resolve(v)).catch(e => reject(e))
              })
            };
            break;
          case 'need':
            //要货单
            requestType = () => {
              return new Promise((resolve, reject) => {
                this.$engineer.searchMyNeed({
                  page_num: this.page_num,
                  condition: this.condition
                }).then(v => resolve(v)).catch(e => reject(e))
              })
            };
            break;
          case 'data':
            //交资料
            requestType = () => {
              return new Promise((resolve, reject) => {
                this.$engineer.searchMyInformation({
                  page_num: this.page_num,
                  condition: this.condition
                }).then(v => resolve(v)).catch(e => reject(e))
              })
            }
            break;
        }
        requestType().then(v => {
          if (!(v instanceof Array)) {
            v = v[this.resultName]
          }
          this.isEnd = false;
          let orders = v || [];
          if ($Utils.isNull(orders)) this.isEnd = true;
          Array.prototype.push.apply(this.resList, orders);
          this.loading = false;
          this.$forceUpdate();
        })
      },
      getHtml(item) {
        let keys = Object.keys(item)
        let template = this.template || ''
        if ($Utils.isNull(this.template)) {
          return;
        } else {
          for (let i = 0; i < keys.length; i++) {
            template = template.replace('{' + keys[i] + '}', item[keys[i]])
          }
        }
        return template
      },
      getTemplate() {
        this.template = this.$refs.template.innerHTML
      },
      go(item) {
        this.$router.push({name: this.goName, params: {item: item}})
      },
      search() {
        this.resList = [];
        this.searchMyData();
      }
    },
    created() {
      this.isEnd = true;
      this.searchMyData();
    },
    mounted() {
      this.getTemplate();
    }
  }
</script>

<style scoped>

</style>
